<template>
  <ViewBox class="view-box-class">
    <SViewSplit direction="horizontal" type="left" :default="200" max="calc(100% - 100px)">
      <template #left>
        <SViewSplit direction="vertical" type="top" min="100px" max="calc(100% - 100px)">
          <template #top>
            top-1
          </template>
          <template #bottom>
            bottom-1
          </template>
        </SViewSplit>
      </template>
      <template #right>
        <SViewSplit ref="selfRef" direction="vertical" type="bottom" :draggable="false">
          <template #top>
            禁止拖拽分割线
          </template>
          <template #bottom>
            <button class="screen-split-btn" @click="todo">手动设置距离到 <span style="color: var(--s-blue);">{{ lenNow }}</span></button>
          </template>
        </SViewSplit>
      </template>
    </SViewSplit>
  </ViewBox>
</template>

<script lang="ts" setup>
import { SViewSplit } from '@sediment/libs'
import { ViewBox } from '@/components'

const selfRef = ref()
const lenNow = ref<number>(500)

const todo = () => {
  selfRef.value.expandTo(lenNow.value)
  lenNow.value = lenNow.value === 500 ? 300 : 500
}

</script>

<style lang="less" scoped>
.screen-split-btn {
  margin: 30px;
}
</style>
